<template>
<div id="myPerformance">
  <div class="blankLin"></div>
  <div class="header lHeader">
    <span class="line"></span>
    <div class="text">
      我的综合表现
      <router-link to='/pages/Risk'>
        <img src="~@/assets/images/questionMark_2x.png">
      </router-link>
    </div>
    <span class="line"></span>
  </div>
  <div class="perforContent" v-show='status == 0'>
    <div class="pre">
      <div ref="myPer" style="width:100%;height:280px"></div>
    </div>
    <div class="evalute">
      <div class="img" style="display: inline-block;">
        <img src="~@/assets/images/trophy2x.png" alt="" />
      </div>
      <div class="runWin">
        您跑赢了
        <i v-text='profit_rank_level'></i> 资产相近的客户
      </div>
    </div>
  </div>
  <return-empty v-show='status == 1'></return-empty>
  <return-error v-show='status == 2'></return-error>
</div>
</div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/radar'
import 'echarts/lib/component/title'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/radar'
import RemoteDAO from '@/common/remoteDAO'

const MyPerformance = {
  title: {
    x: 'center',
    y: 'center',
    textStyle: {
      color: 'rgba(26,101,181,1)',
      fontSize: 20
    }
  },
  tooltip: {
    backgroundColor: 'rgba(0,0,0,.4)',
    formatter: function(obj) {
      return `综合表现<br/>
                收益能力：${obj.data.value[0]}<br/>
                选股能力：${obj.data.value[4]}<br/>
                仓位控制：${obj.data.value[3]}<br/>
                盘面感知：${obj.data.value[2]}<br/>
                风险控制：${obj.data.value[1]}<br/>`
    }
  },
  grid: {
    left: "10%",
    right: '10%',
    top: '10',
    bottom: '5'
  },
  radar: [{
    indicator: [{
        text: '收益能力',
        max: 100
      },
      {
        text: '风险控制',
        max: 100
      },
      {
        text: '盘面感知',
        max: 100
      },
      {
        text: '仓位控制',
        max: 100
      },
      {
        text: '选股能力',
        max: 100
      }
    ],
    radius: 90,
    silent: false
  }],
  color: ['rgba(46,171,255,0.7)'],
  textStyle: {
    color: '#555',
    fontSize: 14
  },
  series: [{
    name: '雷达图',
    type: 'radar',
    areaStyle: {
      normal: {
        color: 'rgba(46,171,255,0.7)'
      }
    },
    data: [{
      lineStyle: {
        normal: {
          type: 'solid'
        }
      }
    }]
  }]
}

export default {
  props: ['fathertime', 'monthstatus'],
  data() {
    return {
      profit_rank_level: '',
      myPer: '',
      status: 0
    }
  },
  created() {
    this.initPre();
  },
  beforDestroy() {
    echarts.dispose(this.myPer)
  },
  watch: {
    fathertime: function() {
      this.initPre();
    },
    monthstatus: function() {
      this.initPre();
    }
  },
  methods: {
    initPre() {
      let vm = this;
      if (vm.fathertime) {
        let obj0019 = {
          "recent": vm.fathertime,
          'pagenum': '30'
        };
        RemoteDAO.callZL13100019(obj0019, vm.ZL13100019);
      }
    },
    ZL13100019(result) {
      let vm = this;
      if (result.error == '1') {
        vm.status = 2
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        specData.length == 0 ? vm.status = 1 : vm.draw(specData)
      }
    },
    draw(specData) {
      let vm = this;
      vm.status = 0
      vm.profit_rank_level = specData[0]._source.profit_rank_level + '%';
      vm.$nextTick(() => {
        if (!vm.myPer) {
          vm.myPer = echarts.init(vm.$refs.myPer);
          vm.myPer.setOption(MyPerformance)
        }
        vm.myPer.setOption({
          title: {
            text: specData[0]._source.cust_index
          },
          series: [{
            data: [{
              value: [specData[0]._source.profit_index, specData[0]._source.risk_index,
                specData[0]._source.sense_index, specData[0]._source.position_index, specData[0]._source.select_index
              ]
            }]
          }]
        })
      })
    }
  }
}
</script>

<style scoped>
.perforContent {
  text-align: center;
}

.evalute {
  font-size: 24px;
  margin-bottom: 80px;
  height: 40px;
  line-height: 40px;
  color: #999;
  text-align: center;
}

.evalute div {
  display: table-cell;
  vertical-align: middle;
}

.evalute .runWin {
  display: inline-block;
}

.evalute .img {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}

.evalute .img img {
  width: 100%;
  height: 100%;
}

.evalute i {
  color: #E31A2E;
}

.pre>div:last-child {
  text-align: left
}

.header .text img {
  display: inline-block;
  height: 26px;
  width: 26px;
  margin-left: 6px;
  vertical-align: bottom;
}

.header .text {
  margin-left: 64px;
  margin-right: 64px;
}

.blankLin {
  height: 14px;
  background-color: #f6f6f6;
}

#myPerformance .lHeader {
  margin-top: 40px;
}
</style>
